<template>
 <div class="star"> 

   <div class="star_left">
      <span class="iconfont smile">&#xe772;</span> 
    </div>

     <div class="hue-star comment-star">
         <div class="hue-star-top" style="width: 84%;">
           <i class="hue-icon">★</i>
            <i class="hue-icon">★</i> 
            <i class="hue-icon">★</i>
             <i class="hue-icon">★</i>
              <i class="hue-icon">★</i> 
          </div> 

          <div class="hue-star-bottom"> 
            <i class="hue-icon">★</i> 
            <i class="hue-icon">★</i> 
            <i class="hue-icon">★</i> 
            <i class="hue-icon">★</i>
            <i class="hue-icon">★</i> 
          </div> 
          
      </div>








   
   
   
    <div class="star_mid">
         <span class="star-score">4.2分</span>
     </div>
             
      <div class="star_right">
          <div class="star_text" >18948条评论 <span class="iconfont enter"> &#xe602;</span></div>
        
  
      </div>
 </div>
</template>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

.star {
  width: 100%;
  background-color: white;
  display: flex;
  color: #ffffff;
  height: 1rem;
  
}
.star_left {
  width: 1rem;
 
}
.star_left span {
  height: 1rem;
  line-height: 1rem;
}
.star_left span.smile {
 
  font-size: 0.45rem;
  color: #999;
}


.comment-star.hue-star {
    font-size: 0.26rem;
    position: relative;
    top: -0.05rem;
    line-height: 1rem;
   
}
.hue-star {
    position: relative;
    display: inline-block;
    padding: 0;
    color: #f90;
}
.hue-star-top {
    position: absolute;
    top: 0px;
    left: 0px;
    overflow: hidden;
    white-space: nowrap;
    font-size: 0px;
}
.hue-star .hue-icon {
    font-size: 0.32rem;
}
.hue-icon {
    display: inline-block;
    font-family: hue icons;
    font-style: normal;
    font-weight: 400;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}
.hue-star-bottom {
    z-index: 0;
    color: #999;
    font-size: 0px;
}



.star_mid{
  width: 1.5rem;
  line-height: 1rem;
}
.star-score{
  color: #f90;;
  font-size: 16px;
}


.star_right {
  width:2.5rem;
  color: #ababab;
  font-size: 16px;
  line-height: 1rem;
  margin-left: 1.5rem;
  
}
.star_right text{
  line-height: 1rem;
 
  
}
.star_right span.enter {
  line-height: 1rem;
  font-size: 25px;
  color: #999;
 
 
}
 
</style>


